<template>
  <el-dialog v-model="menuVisible" title="菜单信息" :before-close="close">
    <el-form :model="menuFrom" label-position="right" label-width="100px">
      <el-form-item label="菜单名称">
        <el-input v-model="menuFrom.title" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="上级菜单">
        <el-cascader v-model="menuFrom.parentId" :props="cascaderProps" :options="menuTreeData" @change="handleChange" :show-all-levels="false"/>
      </el-form-item>
      <el-form-item label="前端名称">
        <el-input v-model="menuFrom.name" autocomplete="off" :disabled="!isAdd"/>
      </el-form-item>
      <el-form-item label="前端图标">
        <el-input v-model="menuFrom.icon" autocomplete="off" :disabled="!isAdd"/>
      </el-form-item>
      <el-form-item label="是否显示">
        <el-switch v-model="menuFrom.hidden" :active-value="0" :inactive-value="1"/>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="menuFrom.sort" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="modifyMenu"
        >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {reactive, toRefs, ref, watch} from 'vue'
import {getMenuTreeApi} from '../../../../request/api/menu'

const props = defineProps<{
  menuFrom: MenuListItf,
  menuVisible: boolean,
  isAdd: boolean,
  menuTreeData: MenuListItf[]
}>()

const state = reactive<{
  newMenuForm: MenuListItf
}>({
  newMenuForm: {}
})

const cascaderProps = {
  value: "id",
  label: "title",
  checkStrictly: true
}

const {newMenuForm} = toRefs(state)

// 拷贝form
watch(() => props.menuFrom, () => {
  newMenuForm.value = {...props.menuFrom}
})

const emit = defineEmits<{
  (event: 'close'): void
}>()
// 点击关闭按钮
const close = () => {
  emit('close')
}

// 点击确认按钮
const modifyMenu = () => {

}

// 获取上级菜单
const handleChange = (value:number[]) => {
  console.log(value[value.length - 1])
}
</script>
<style lang="less" scoped>
</style>
